import React from 'react'
const { Provider, Consumer } = React.createContext()
// 子组件修改context一般使用usestate这个函数，后面会介绍，这里就不展示了
// 后面如果有大量的跨组件的数据操作，可以使用redux
export default class extends React.Component {
  state = {
    count: 0
  }
  onIncrement = (res) => {
    this.setState({
      count: this.state.count + res
    })
  }
  render() {
    // 单纯传递一个数据
    // return (
    //   <Provider value={this.state}>
    //     <div>
    //       爷爷组件
    //       <Child1></Child1>
    //     </div>
    //   </Provider>
    // )
    return (
      // 传递数据加事件
      <Provider
        value={{ count: this.state.count, increment: this.onIncrement }}>
        <div style={{ backgroundColor: '#fddd9b' }}>
          爷爷组件
          <div style={{ height: '10px' }}></div>
          <Child1></Child1>
        </div>
      </Provider>
    )
  }
}

class Child1 extends React.Component {
  render() {
    return (
      <div>
        父组件
        <Consumer>
          {(value) => {
            return <h1>计数器：{value.count}</h1>
          }}
        </Consumer>
        <Child2></Child2>
      </div>
    )
  }
}
class Child2 extends React.Component {
  handleClick = (value) => {
    console.log('处理自定义逻辑')
    value.increment(2)
  }
  render() {
    return (
      <Consumer>
        {(value) => {
          // console.log("222", value);
          return (
            <div>
              孙子组件
              {/* <button onClick={() => value.increment(2)}>修改数据</button> */}
              <button onClick={() => this.handleClick(value)}>修改数据</button>
              <h1>计数器：{value.count}</h1>
            </div>
          )
        }}
      </Consumer>
    )
  }
}
